<html>
  <head>
    <title></title>
    <style>
    
      html { }
      div.area {
        flow: "1 3"
              "2 4"
              "5 7"
              "6 8";
        border-spacing:6px;
      }

      div.container.slide-over-top    { transition: slide-over-top quad-in-out 800ms; }
      div.container.slide-over-bottom { transition: slide-over-bottom quad-in-out 800ms; }
      div.container.slide-over-left   { transition: slide-over-left quad-in-out 800ms; }
      div.container.slide-over-right  { transition: slide-over-right quad-in-out 800ms; }
      
      div.container
      {
        prototype: HoverChanger;
        size:432dip 324dip;
        background:#777;
      }
      
      div.container > picture { size:*; }
      
      
    </style>
    <script type="text/tiscript">
    
      class HoverChanger : Element {

        function setSrc(url) { this.update( () => this.$(picture).attributes["src"] = url ) }
      
        event mouseenter { this.setSrc("images/photo2.jpg") }
        event mouseleave { this.setSrc("images/photo1.jpg") }
      }
    
    </script>
  </head>
<body>
  Hover the image:
  <div .area>
    <caption>transition: slide-over-top quad-in-out 800ms:</caption>
    <div .container .slide-over-top ><picture src="images/photo1.jpg"/></div>
    <caption>transition: slide-over-bottom quad-in-out 800ms:</caption>
    <div .container .slide-over-bottom ><picture src="images/photo1.jpg"/></div>
    <caption>transition: slide-over-left quad-in-out 800ms:</caption>
    <div .container .slide-over-left  ><picture src="images/photo1.jpg"/></div>
    <caption>transition: slide-over-right quad-in-out 800ms:</caption>
    <div .container .slide-over-right ><picture src="images/photo1.jpg"/><div>
  </div>
</body>
</html>